<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>登录</span>
        </div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
                <el-input type="password" v-model="ruleForm.pwd" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script>
import { login } from '@/services/user';
export default {
    components: {
    },
    data() {
        return {
            ruleForm: {
                pwd: '',
                username: ''
            },
            rules: {

            }
        };
    },
    methods: {
        async submitForm(formName) {
            console.log(this.ruleForm)
            let data = await login(this.ruleForm.username,this.ruleForm.pwd)
            if (data.status == 1) {
                localStorage.setItem("token", data.token);
                this.$router.push("/manage");
            } else {
                this.$alert('验证失败', '错误', {
                    confirmButtonText: '确定'
                });
            }
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
<style>
.box-card {
    width: 500px;
    margin: auto;
}
</style>